<template>
    <div>
        <div class="productSupermarketBox">
            <div class="productSupermarketItem" v-for="i in 3">
                <div class="productSupermarketItem_new">
                    <img src="~BUSSINESS_IMAGE/images/new.png" />
                </div>
                <div class="productSupermarketItem_free">
                    <img src="~BUSSINESS_IMAGE/images/free.png" />
                </div>
                <div class="productSupermarketItem_img">
                    <img src="~BUSSINESS_IMAGE/images/test_2.png" />
                </div>
                <div class="productSupermarketItem_info">
                    <div class="productSupermarketItem_name">EasyD-CMS内容管理系统</div>
                    <div class="productSupermarketItem_desc">欢迎使用EasyD-CMS内容管理系统，他将是您轻松建站的首选利器。采用XML名字空间风格核心模板：模板全部使用文件形式保存，对用户设计模板、网站升级转移均提供很大的便利，健壮的模板标签为站长DIY 自己的网站提供了强有力的支持。</div>
                </div>
                <div class="productSupermarketItem_middleLine"></div>
                <div class="productSupermarketItem_statistical">
                    <div class="productSupermarketItem_statisticalItem">
                       <i class="fa fa-download"></i>下载次数：1000次
                    </div>
                    <div class="productSupermarketItem_statisticalItem">
                       <i class="fa fa-cloud"></i>云服务数：1000次
                    </div>
                    <div class="productSupermarketItem_statisticalItem">
                       <i class="fa fa-eye"></i>浏览次数：1000次
                    </div>
                    <div class="productSupermarketItem_statisticalItem">
                       <i class="fa fa-send"></i>评论总数：1000次
                    </div>
                    <div class="productSupermarketItem_rateItem">
                       <div class="productSupermarketItem_rateTitle">
                           <i class="fa fa-shield"></i>推荐星级：
                       </div>
                       <div class="productSupermarketItem_rateBox">
                           <el-rate value="2" :max="10"></el-rate>
                       </div>
                    </div>
                    
                </div>
                <div class="productSupermarketItem_link">
                    产品介绍
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {

            }
        },
        //初始化函数
        mounted() {

        },
        //计算属性
        computed: {
            // ...mapState({ })
        },
        //组件方法
        methods: {
            // ...mapMutations()
        }
    }
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
.productSupermarketBox {
    width 100%
    height auto
    display flex
    flex-wrap wrap
    justify-content space-between
}

.productSupermarketItem {
    width 49%
    height 245px
    border-radius 5px
    background #FEFEFE
    border 1px solid #eee  
    box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
    position relative  
    margin-bottom 20px
    overflow hidden

    .productSupermarketItem_link {
        width 30%
        height 95px
        box-sizing border-box
        float right
        btnStyle(95px)
    }

    .productSupermarketItem_statistical {
        width 70%
        height 90px
        float left        
        padding-left 20px
        padding-right 15px
        padding-top 10px
        padding-bottom 10px
        box-sizing border-box

        i {
            margin-right 5px
            font-size 12px
            color #999
        }

        .productSupermarketItem_statisticalItem {
            width 50%
            float left
            color #999
            margin-bottom 10px
        }

        .productSupermarketItem_rateItem {
            width 100%
            float left
            margin-bottom 10px
            color #999

            .productSupermarketItem_rateTitle {
                width 80px
                float left    
            }

            .productSupermarketItem_rateBox {
                width auto
                float left
                position relative
                top -1px 
                left -6px   
            }
        }
    }

    .productSupermarketItem_new {
        width 50px
        height 42px
        position absolute
        right 10px
        top -2px
        z-index 99    

        img {
            width 100%
            height auto
        }
    }

    .productSupermarketItem_free {
        width 50px
        height 42px
        position absolute
        right 60px
        top -2px
        z-index 99    

        img {
            width 100%
            height auto
        }
    }

    .productSupermarketItem_middleLine {
        width 100%
        height 1px
        background #eee    
        float left
    }

    .productSupermarketItem_info {
        position absolute
        left 37%
        right 20px
        top 20px
        bottom 110px
        float left

        .productSupermarketItem_name {
            width 100%
            height 30px
            font-size mainTitleFontSize 
            background #fff
            font-weight bold
        }

        .productSupermarketItem_desc {
            width 100%
            height 80px
            font-size contentTextFontSize 
            background #fff 
            text-align: justify
            line-height 20px
        }
    }

    .productSupermarketItem_img {
         width 200px
         float left
         height 130px
         margin 10px
         background #fff
         padding 5px
         box-sizing border-box
         border-radius 5px

         img {
             width 100%
             height auto
             
         }
    }
}
</style>